Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2016, 23:59
Интересующийся
Отправить личное сообщение для Gowa Посмотреть профиль Найти все сообщения от Gowa
 
Регистрация: 17.04.2016
Сообщений: 11

ajax. Множественная отправка данных (баг)
Всем здравствуйте. Затрудняюсь понятным языком описать проблему, но всё же постараюсь.
Имеется php-скрипт, который читает базу на предмет некоторых данных, затем рисует на странице кликабельный список из этих данных. На клик реагирует js-скрипт, который отправляет данные через ajax-запрос, последний в результате перерисовывает данные в соседнем диве, в котором, в свою очередь, находится кнопочка, к примеру, "инфо" (jquery dialog), при нажатии на которую открывается модальное окно с подробной информацией хранящейся в БД об нажатом элементе списка.
Сопсно, код аякса:
//  SCRIPT1

$( '.list' ).click(function(){
	$.ajax({method: 'POST',
		cache: false,
		url: 'somePage.php',
		data: { dataKey: dataValue },
		dataType: 'text',
		success: function(data){
			$(  '#someDiv1' ).remove();
			$(  '#someDiv2' ).html('<div id=\'someDiv1\'></div>');
			$(  '#someDiv1' ).replaceWith(data);    },
	});
});


Проблема состоит в том что поклацав несколько раз на элементы списка (не важно, одни и те же или разные), нажав в конце на кнопку "инфо", модальное окно откроется столько раз, сколько раз было нажато на элементы списка.
Надеюсь, описание понятное. Сопсно вопрос: почему так происходит, и как это полечить?

Последний раз редактировалось Gowa, 19.07.2016 в 15:01.
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2016, 10:24
Аспирант
Отправить личное сообщение для Spass Посмотреть профиль Найти все сообщения от Spass
 
Регистрация: 14.07.2016
Сообщений: 86

Скорее всего вы навешиваете кучу обработчиков на кнопку инфо, но наверняка сказать сложно - кода нет.

.unbind() - поставьте перед навешиванием нового обработчика
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2016, 22:19
Интересующийся
Отправить личное сообщение для Gowa Посмотреть профиль Найти все сообщения от Gowa
 
Регистрация: 17.04.2016
Сообщений: 11

Та не, кнопка инфо одна единственная и на ней единственный обработчик - клик.
//  SCRIPT2

$( '#infoBtn' ).click(function(){
	var someInfo = ''; //данные, связанные с нажатым элементом в левом блоке
	$('#infoDiv').html('<div id=\'Info\'></div>');
	$('#Info').html(someInfo);
	$( '#Info' ).dialog({
		draggable: true,
		modal: true,
		width: 650,
		minWidth: 500,
		buttons: {
			Ok: function() { $( this ).dialog( "close" );	}
			},
		show: {
			effect: "puff",
			duration: 400,
			},
		hide: {
			effect: "puff",
			duration: 400,
			},
		close: function(event) {
			$( '.ui-dialog' ).empty();
			$( '#Info' ).empty();
		},
	});
});

При каждом нажатии на элемент списка, див со всем содержимым удаляется и пересоздается (как это показано в предыдущем коде). Таким образом несколько кнопок "инфо" на странице быть не может.
А если открепить обработчик с элемента списка при нажатии на него, как быть, если пользователь захочет вернуться на тот элемент, на который прежде кликал? Обработчик то будет уже отключен...

Вообще проблема, как мне кажется, не в самой кнопке "инфо". Беда кроется где-то на этапе аякс-запроса, но ума не приложу где и почему это происходит. И главное - как отследить.

Попробую изобразить.
В левой части страницы, обведенное зелёным, находится блок со списком (не список html, а просто сгенерированные циклом дивы. Не суть важно). Справа от него, обведённое красным - див, генерируемый в результате нажатия на один из элементов в левом блоке. При нажатии на элемент в левом блоке, выполняется SCRIPT1 (в первом сообщении) - правый блок удаляется со всем содержимым и создаётся новый с соответствующими нажатому элементу данными, и на этом сгенерированном блоке есть кнопка, при нажатии на которую выполняется SCRIPT2 (выше в посте) - выводятся в модальном окне некоторые данные, связанные с нажатым элементом в левом блоке. Загвоздка в том что понажимав несколько раз на разные элементы в левом блоке и потом единожды нажав на кнопку "инфо", отобразится модалка не последнего нажатого элемента в левом блоке, а каждого нажатого в порядке их нажатия.
Изображения:
Тип файла: jpg 111.jpg (41.9 Кб, 2 просмотров)

Последний раз редактировалось Gowa, 19.07.2016 в 15:01. Причина: очепятка + недописал
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2016, 10:49
Аспирант
Отправить личное сообщение для Spass Посмотреть профиль Найти все сообщения от Spass
 
Регистрация: 14.07.2016
Сообщений: 86

Я правильно понимаю что кнопка инфо пересоздается при каждом нажатии на список слева? И каждый раз вы привязываете обработчик к кнопке (SCRIPT2).

Предположу что
$( '#Info' ).dialog( - настакивает диалоги при каждом пересоздании кнопки, но наверняка сказать сложно, вы опять не предоставили код где идет привязка обработчика к кнопке
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2016, 15:00
Интересующийся
Отправить личное сообщение для Gowa Посмотреть профиль Найти все сообщения от Gowa
 
Регистрация: 17.04.2016
Сообщений: 11

совершенно верно, кнопка пересоздается каждый раз при срабатывании SCRIPT1.

Ну как же не предоставил?! В SCRIPT2 при нажатии на кнопку
выполняется функция jquery click, параметром которой является функция, в которой вызывается dialog, в теле которого выводится переменная. При закрытии dialog его div очищается
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2016, 15:26
Аспирант
Отправить личное сообщение для Spass Посмотреть профиль Найти все сообщения от Spass
 
Регистрация: 14.07.2016
Сообщений: 86

Возможно я непонятно объяснил.
Обработчик не повесится самостоятельно на созданную кнопку (за исключением делегирования событий, которого я не вижу), следовательно SCRIPT2 должен объявляться после каждого добавления кнопки, что опять же нигде в коде не отображено.


<добавляем кнопку>
<объявляем обработчик>
работает


<объявляем обработчик на несуществующую кнопку>
<добавляем кнопку>
не работает
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2016, 16:26
Интересующийся
Отправить личное сообщение для Gowa Посмотреть профиль Найти все сообщения от Gowa
 
Регистрация: 17.04.2016
Сообщений: 11

Спасибо Вам большое, Вы меня навели на верную мысль Я понял, в чём мой косяк.

Пересмотрев html-код, я обнаружил, что кнопка не пересоздается. Она единожды рисуется при загрузке страницы, но не пересоздаётся динамически при обновлении данных. Переписал код таким образом, чтобы при срабатывании SCRIPT1 удалялась кнопка и пересоздавалась.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправка и получение данных AJAX Le7o AJAX и COMET 18 14.06.2016 21:55
Отправка данных формы. Как выглядит структура метода с AJAX (по JQuery)? Coriolan161 AJAX и COMET 5 24.11.2015 20:17
Отправка данных AJAX из модального окна r06otyaga jQuery 0 15.11.2015 19:28
Ajax отправка данных Serhiy AJAX и COMET 0 29.01.2014 19:03
отправка данных в инпут через AJAX 2 imediasun1 Элементы интерфейса 1 30.01.2013 18:13